<template>
  <div id="app">
    <a-layout id="components-layout-demo-fixed" class="layout">
      <a-layout-header  style="background-color: #fff" :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
        <a-row>
          <a-col  :xs="{ span: 20, offset: 0 }" :lg="{ span: 16, offset: 4 }">
            <div class="logo">
              <router-link :to="{name: 'index'}"><img src="./assets/logo.png" style="width: 100%;height:100%;"/></router-link>
            </div>
            <a-menu
                    mode="horizontal"
                    :defaultSelectedKeys="['1']"
                    :style="{ lineHeight: '64px' }"
            >
              <a-menu-item key="1"><router-link :to="{name: 'news'}">新闻</router-link></a-menu-item>
              <a-menu-item key="2"><router-link :to="{name: 'game'}">比赛</router-link></a-menu-item>
              <a-menu-item key="3"><router-link :to="{name: 'game'}">对弈</router-link></a-menu-item>
              <a-menu-item key="4"><router-link :to="{name: 'chess_manual'}">棋谱</router-link></a-menu-item>
              <a-menu-item key="5"><router-link :to="{name: 'chess_manual'}">排行榜</router-link></a-menu-item>

              <a-menu-item key="6"><router-link :to="{name: 'videos'}">视频教学</router-link></a-menu-item>
              <a-menu-item key="7"><router-link :to="{name: 'forum'}">棋艺论坛</router-link></a-menu-item>
              <a-menu-item key="8"><router-link :to="{name: 'chess_manual'}">名师简介</router-link></a-menu-item>
              <a-menu-item key="9"><router-link :to="{name: 'chess_manual'}">关于我们</router-link></a-menu-item>
              <a-menu-item key="10" @click="showModal" v-show="loginFlag == false">登录/注册</a-menu-item>
              <a-menu-item key="11" v-show="loginFlag == true">
                <a-dropdown>
                  <a class="ant-dropdown-link" href="#"> leeya
                    <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> </a>
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <!--<router-link :to="{name: 'my'}">个人中心</router-link>-->
                      <router-link :to="{name: 'my_course'}">个人中心</router-link>
                    </a-menu-item>
                    <a-menu-item>
                      <span @click="exit">退出登录</span>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </a-menu-item>
            </a-menu>
          </a-col>
        </a-row>

      </a-layout-header>
      <a-layout-content style="padding: 0 50px;margin-top: 70px;">
        <a-row class="main">
          <a-col :lg="4"></a-col>
          <a-col :lg="16" :sm="24" :md="24">
            <router-view></router-view>
          </a-col>
          <a-col :lg="4"></a-col>
        </a-row>
      </a-layout-content>
      <a-layout-footer style="text-align: center;margin-top: 20px">
        leeya开发
      </a-layout-footer>
    </a-layout>
    <a-modal v-model="visible" @ok="handleOk" :footer="null" closable>
      <a-tabs defaultActiveKey="1" @change="callback">
        <a-tab-pane tab="账号密码登录" key="1">
          <a-input placeholder="请输入账号">
            <a-icon slot="prefix" type="user" />
          </a-input>
          <a-input-password placeholder="请输入密码" style="margin-top: 20px;">
            <a-icon slot="prefix" type="user" />
          </a-input-password>
        </a-tab-pane>
        <a-tab-pane tab="手机号登录" key="2" forceRender>
          <a-input-number id="inputNumber" style="width: 100%;" :min="1" :max="10" v-model="phone" @change="onChange" placeholder="请输入手机号">
            <a-icon slot="prefix" type="user" />
          </a-input-number>
          <a-input-number id="code" :min="1" style="width: 350px;margin-right: 20px;margin-top: 20px;" :max="10" v-model="phone" @change="onChange" placeholder="请输入验证码">
            <a-icon slot="prefix" type="user" />
          </a-input-number>
          <a-button type="Default">发送验证码</a-button>
        </a-tab-pane>
      </a-tabs>
      <a-row type="flex" justify="space-between" class="main">
        <a-col :span="6">
          <a-checkbox @change="onChangeCheckBox">自动登录</a-checkbox>
        </a-col>
        <a-col :span="4"><a-button type="link">忘记密码</a-button></a-col>
      </a-row>
      <a-button type="primary" block style="margin-top: 10px;" @click="login">提交</a-button>
    </a-modal>
  </div>
</template>
<script>
import AButton from "ant-design-vue/es/button/button";

export default {
    components: {AButton},
    name: 'App',
    data() {
        return {
            loginFlag:true,
            visible: false,
            phone: 3,
        };
    },
    methods: {
        showModal() {
            this.visible = true;
        },
        handleOk(e) {
            console.log(e);
            this.visible = false;
        },
        callback(key) {
            console.log(key);
        },
        onChange(value) {
            console.log('changed', value);
        },
        onChangeCheckBox(e) {
            console.log(`checked = ${e.target.checked}`);
        },
        login(){
            this.$message.success('登录成功');
            this.loginFlag = true;
            this.visible = false;
        },
        exit(){
            this.$message.success('退出登录成功');
            this.loginFlag = false;
        }
    }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body{
  margin-top: 100px;
}
#components-layout-demo-fixed .logo {
  width: 150px;
  height: 65px;
  background: rgba(255, 255, 255, 0.2);
  float: left;
}
.main{
  padding-top: 20px;
}

</style>
